<style lang="less">
    @import '../styles/main';

    .app-main .main-header .header-avator-con .user-dropdown-menu-con {
        width: 200px;
    }
    .spin-loader {
        position: absolute;

    }
</style>
<template>
    <div class="main" :class="{'main-hide-text': shrink}">
        <div class="sidebar-menu-con" :style="{width: shrink?'60px':'240px', overflow: shrink ? 'visible' : 'auto'}">
            <shrinkable-menu
                    :shrink="shrink"
                    @on-change="handleSubmenuChange"
                    :theme="menuTheme"
                    :before-push="beforePush"
                    :open-names="openedSubmenuArr"
                    :menu-list="menuList">
                <div slot="top" class="logo-con">
                    <img v-show="!shrink" src="../styles/images/logo.png" key="max-logo"/>
                    <img v-show="shrink" src="../styles/images/logo-min.png" key="min-logo"/>
                </div>
            </shrinkable-menu>
        </div>
        <div class="main-header-con" :style="{paddingLeft: shrink?'60px':'240px'}">
            <div class="main-header">
                <div class="navicon-con">
                    <Button :style="{transform: 'rotateZ(' + (this.shrink ? '-90' : '0') + 'deg)'}" type="text"
                            @click="toggleClick">
                        <Icon type="navicon" size="32"></Icon>
                    </Button>
                </div>
                <div class="header-middle-con">
                    <div class="main-breadcrumb">
                        <div style="font-size: 14px">
                            <i class="iconfont finleanCloud-location"></i>
                            <span style=" vertical-align: middle;  color: #999;">当前位置 :</span>
                        </div>
                        <breadcrumb-nav :currentPath="currentPath"></breadcrumb-nav>
                    </div>
                </div>
                <div class="header-avator-con" style="width: 210px;">
                    <!--<full-screen v-model="isFullScreen" @on-change="fullscreenChange"></full-screen>-->
                    <!--<lock-screen></lock-screen>-->
                    <!--<message-tip></message-tip>-->
                    <!--<theme-switch></theme-switch>-->
                    <div class="user-dropdown-menu-con" style="width: 210px;">
                        <Row type="flex" justify="end" align="middle" class="user-dropdown-innercon">
                            <Dropdown transfer trigger="click" @on-click="handleClickUserDropdown">
                                <a href="javascript:void(0)">
                                    <span class="main-user-name" style="width: 130px;">{{ userName }}</span>
                                    <Icon type="arrow-down-b"></Icon>
                                </a>
                                <DropdownMenu slot="list">
                                    <!--<DropdownItem name="ownInfo">个人信息</DropdownItem>-->
                                    <!--<DropdownItem name="updatePhoneNum">修改手机号</DropdownItem>-->
                                    <!--<DropdownItem name="ownSpace">修改密码</DropdownItem>-->
                                    <DropdownItem name="loginout" >退出登录</DropdownItem>
                                </DropdownMenu>
                            </Dropdown>
                            <Avatar :src="avatorPath" style="background: #619fe7;margin-left: 10px;"></Avatar>
                        </Row>
                    </div>
                </div>
            </div>
            <!--<div class="tags-con">-->
            <!--<tags-page-opened :pageTagsList="pageTagsList"></tags-page-opened>-->
            <!--</div>-->
        </div>


        <div class="single-page-con" :style="{left: shrink?'60px':'240px'}">
            <div class="single-page" style="margin: 0;position: relative;">
                <keep-alive :include="cachePage">
                    <router-view></router-view>
                </keep-alive>
                <!--<Spin fix class="spin-loader" v-if="showLoading" size="large"></Spin>-->
            </div>
        </div>
        <!--修改密码-->
        <Modal v-model="editPasswordModal" :closable='false' :mask-closable=false :width="500">
            <h3 slot="header" style="color:#fff">修改密码</h3>
            <Form class="changePD" style="padding-right: 20px;padding-top: 20px;" ref="editPasswordForm" :model="editPasswordForm" :label-width="100" label-position="right"
                  :rules="passwordValidate">
                <FormItem label="原密码" prop="oldPass" :error="oldPassError">
                    <Input v-model="editPasswordForm.oldPass" type="password" :maxlength="12"
                           placeholder="请输入现在使用的密码"></Input>
                </FormItem>
                <FormItem label="新密码" prop="newPass">
                    <Input v-model="editPasswordForm.newPass" type="password" :maxlength="12"
                           placeholder="请输入新密码，6-12位字符 数字+字母区分大小写"></Input>
                </FormItem>
                <FormItem label="确认新密码" prop="rePass">
                    <Input v-model="editPasswordForm.rePass" type="password" :maxlength="12"
                           placeholder="请再次输入新密码"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="cancelEditPass">取消</Button>
                <Button type="primary" :loading="savePassLoading" @click="saveEditPass">修改</Button>
            </div>
        </Modal>

    </div>
</template>
<script>
    import shrinkableMenu from './main-components/shrinkable-menu/shrinkable-menu.vue';
    import tagsPageOpened from './main-components/tags-page-opened.vue';
    import breadcrumbNav from './main-components/breadcrumb-nav.vue';
    //    import fullScreen from './main-components/fullscreen.vue';   // 全屏组件
    import lockScreen from './main-components/lockscreen/lockscreen.vue';
    import messageTip from './main-components/message-tip.vue';   // 消息组件
    import themeSwitch from './main-components/theme-switch/theme-switch.vue';
    import Cookies from 'js-cookie';
    import md5 from 'blueimp-md5';
    import util from '@/tool/util.js';
    import systemApi from '../api/api';
    import codeManage from '@/api/statusCodeManage';
    import validatorList from '@/tool/validator';

    export default {
        components: {
            shrinkableMenu,
            tagsPageOpened,
            breadcrumbNav,
            //            fullScreen,
            lockScreen,
            messageTip,
            themeSwitch
        },
        data() {
            const validePhone = (rule, value, callback) => {
                var re = /^1[0-9]{10}$/;
                if (!re.test(value)) {
                    callback(new Error('请输入正确格式的手机号'));
                } else {
                    callback();
                }
            };
            const valideEmail = (rule, value, callback) => {
                if (validatorList.checkEmail(value)) {
                    callback();
                } else {
                    callback(new Error('请输入正确格式的邮箱'));

                }
            };
            const valideUserName = (rule, value, callback) => {
                if (validatorList.checkChineseCharacter(value)) {
                    callback();
                } else {
                    callback(new Error('请输入中文'));

                }
            };
            const valideRePassword = (rule, value, callback) => {
                if (value !== this.editPasswordForm.newPass) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback();
                }
            };
            return {
                shrink: false,
                userName: '',
                name: '',
                savePassLoading: false,
                //                isFullScreen: false,   // 全屏组件
                openedSubmenuArr: this.$store.state.app.openedSubmenuArr,
                editPasswordModal: false, // 修改密码模态框默认隐藏
                updatePhoneNumModal:{
                    isShow:false,
                    tabsName:"oldPhoneNum",
                }, // 修改手机号码的模态窗
                editUserInfomation:{  // 编辑用户模态窗
                  isShow:false,

                },
                userInfoForm:{  // 用户表单信息

                },
                inforValidate: {
                    name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
                    cellphone: [
                        {required: true, message: '请输入手机号码'},
                        {validator: validePhone}
                    ]
                },
                // 编辑密码的表单
                editPasswordForm: {
                    oldPass: '',
                    newPass: '',
                    rePass: ''
                },
                passwordValidate: {
                    oldPass: [{required: true, message: '请输入原密码', trigger: 'blur'}],
                    newPass: [
                        {required: true, message: '请输入新密码', trigger: 'blur'},
                        {
                            required: true,
                            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
                            message: '请输入正确格式的密码',
                            trigger: 'blur'
                        },
                        {min: 6, message: '请至少输入6个字符', trigger: 'blur'},
                        {max: 16, message: '最多输入16个字符', trigger: 'blur'}
                    ],
                    rePass: [
                        {required: true, pattern: /^[0-9a-zA-Z]{6,16}$/, message: '请再次输入新密码', trigger: 'blur'},
                        {validator: valideRePassword, trigger: 'blur'}
                    ]
                },
                userValidate:{
                    userName: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                        {validator:valideUserName}
                        ],
                    email: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'},
                        {validator:valideEmail}
                    ]
                }
            };
        },
        computed: {
            menuList() {
                return this.$store.state.app.menuList;
            },
            pageTagsList() {
                return this.$store.state.app.pageOpenedList; // 打开的页面的页面对象
            },
            currentPath() {
                return this.$store.state.app.currentPath; // 当前面包屑数组
            },
            avatorPath() {
                return localStorage.avatorImgPath;
            },
            cachePage() {
                return this.$store.state.app.cachePage;
            },
            lang() {
                return this.$store.state.app.lang;
            },
            menuTheme() {
                return this.$store.state.app.menuTheme;
            },
//            mesCount() {
//                //                消息数量
//                return this.$store.state.app.messageCount;
//            }
        },
        methods: {
            // 界面个人信息数据初始化
            init() {
                // 设置当前路径
                let pathArr = util.setCurrentPath(this, this.$route.name);
                if (pathArr.length >= 2) {
                    this.$store.commit('addOpenSubmenu', pathArr[1].name);
                }
                this.userName = Cookies.get('flc_name');
//                let messageCount = 3;
//                this.messageCount = messageCount.toString();
                this.checkTag(this.$route.name);
//                this.$store.commit('setMessageCount', 3);

            },

            toggleClick() {
                this.shrink = !this.shrink;
            },



            // 个人中心
            handleClickUserDropdown(name) {
                let _this = this;
                if (name === 'loginout') {
                    // 退出登录
                    Cookies.remove('flc_user');
                    Cookies.remove('flc_sid');
                    Cookies.remove('flc_name');

                    _this.$store.commit('logout', this);
                    _this.$store.commit('clearOpenedSubmenu');
                    _this.$router.push({
                        name: 'login'
                    });
                }
            },
            checkTag(name) {
                let openpageHasTag = this.pageTagsList.some(item => {
                    if (item.name === name) {
                        return true;
                    }
                });
            },
            nextStepOfChangePhone(){
                this.editPasswordModal.tabsName = 1;
            },
            handleSubmenuChange(val) {
                console.log(val)
            },
            beforePush(name) {
                console.log(name)
                return true;
            },
            fullscreenChange(isFullScreen) {
                // 全屏组件调用方法
                // console.log(isFullScreen);
            }
        },
        watch: {
            $route(to) {
                this.$store.commit('setCurrentPageName', to.name);
                //                console.log(this);
                let pathArr = util.setCurrentPath(this, to.name);
                //                debugger
                if (pathArr.length > 2) {
                    //                    this.$store.commit('addOpenSubmenu', pathArr[1].name);
                }
                //                this.checkTag(to.name);
                localStorage.currentPageName = to.name;
            },
            lang() {
                //                util.setCurrentPath(this, this.$route.name);  // 在切换语言时用于刷新面包屑
            }
        },
        mounted() {
            this.init();
        },
        created() {

        }
    };
</script>
